import Vue from 'vue'
import Vuex from 'vuex'

// 1. 安装插件
Vue.use(Vuex)

// 2.创建对象

const moduleA = {
  state: {
    name:'zhangshang'
  },
  mutations: {
    updateName(state,payload){
      state.name = payload
    }
  },
  actions: {
    AUpdateName(context){
      setTimeout(() =>{
        context.commit('updateName','kebi')
      },1000)
    }
  },
  getters: {
    fullName(state){
      return state.name + '111'
    },
    fullName2(state,getters){
      return getters.fullName + '222'
    },
    // modules属性里面的方法属性可以通过 rootState 拿到根级的 state
    fullName3(state,getters,rootState){
    return getters.fullName2 + rootState.counter
    }
  }
}

const store = new Vuex.Store({
  // state 保存状态
  state:{
    counter:100,
    students:[
      {id:1,name:'pink',age:38},
      {id:2,name:'why',age:29},
      {id:3,name:'lzp',age:18},
      {id:4,name:'lf',age:16},
      {id:5,name:'lzd',age:20},
      {id:6,name:'lsq',age:29},
    ],
    info:{name:'why123',age:20}
  },
  // mutations 方法 方法函数里面的参数默认有一个 state
  mutations:{
    increment(state){
      state.counter++
    },
    decrement(state){
      state.counter--
    },
    // 接收app组件 commit传递过来的 count参数
    incrementCount(state,count){
      state.counter += count
    },
    // 接收app组件 commit传递过来的 count参数  payload：负载 也就是传递过来的对象
    // incrementCount(state,payload){
    //   state.counter += payload.count
    // },

    // 接收app组件 commit传递过来的 stu参数
    addStudent(state,stu){
      state.students.push(stu)
    },

    UpdateInfo(state){
      state.info.name = 'coderwhy'
    }
  },

  // actions 异步请求方法
  actions:{
    // 函数参数里面默认有个 context
    // 这里的context 指向的外面创建全局的store 对象
    aUpdateInfo(context,payload){
      setTimeout(() =>{
        context.commit('UpdateInfo')
        payload.success()
      },1000)
    }
  },
  // getters 全局计算属性 函数里面的参数默认有一个 state
  getters:{
    powerCounter(state){
      return state.counter * state.counter;
    },
    more20stu(state){
      // filter 高阶函数 遍历数组 s 是每个一对象
      return state.students.filter((s) => {
        return s.age >= 20
      })
    },
    more20stuLength(state,getters){
      return getters.more20stu.length
    },
    moreAgeStu(state){
      return function(age){
        return state.students.filter((s) => {
          return s.age >= age
        })
      }
    }
  },

  // modules 模块化 里面跟多个对象 多个对象里面可以放我们的vuex属性
  // modules 中定义的属性会自动存放到 state属性中
  modules:{
    a:moduleA
  }

})


// 3.导出 store 对象
export default store